<template>
  <div class="center">
    <div class="left">
      <div class="top">
        <div class="people">
          <div class="icon">
            <component
              is="Avatar"
              style="width: 35px; height: 35px; color: rgb(33, 61, 192)"
            />
          </div>
          <div class="info" @click="jumpDetail(1)">
            <p>2080人</p>
            <p>今天新增人数</p>
          </div>
        </div>
        <div class="money">
          <div class="icon">
            <component
              is="Histogram"
              style="width: 35px; height: 35px; color: rgb(33, 61, 192)"
            />
          </div>
          <div class="info" @click="jumpDetail(2)">
            <p>28.50元</p>
            <p>今天收益</p>
          </div>
        </div>
      </div>
      <div class="bot">
        <h4>订单数据统计</h4>
        <div class="data">
          <p><span>累计订单数</span><span>昨日新增订单</span></p>
          <div class="count">
            <span>236</span>
            <span>152</span>
          </div>
        </div>

        <div class="list">
          <div class="day">
            <span>每日订单</span>
            <div class="select">
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group
                  v-model="radio1"
                  class="ml-4"
                  @change="changeRadio"
                >
                  <el-radio label="1" size="default">累计</el-radio>
                  <el-radio label="2" size="default">新增</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="contentOne" ref="divContent"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="report">
        <h4>实时战报</h4>
        <div class="pic">
          <div class="leftPic">
            <div>
              <el-image :src="getImageUrl('laba','png')" alt="" lazy />
              <p>
                <span>59</span>
                <span>今日下单数</span>
              </p>
            </div>
          </div>
          <div class="rightPic" ref="pieContent"></div>
        </div>
      </div>
      <div class="orderList">
        <div class="head">
          <ul>
            <li style="width: 80px">头像</li>
            <li style="width: 140px">下单时间</li>
            <li style="width: 80px">件数</li>
            <li style="width: 80px">金额</li>
            <li style="width: 80px">分类</li>
            <li style="width: 300px; padding-left: 40px">商品名称</li>
          </ul>
        </div>
        <div class="content">
          <vue3-seamless-scroll :list="orderArr" class="scroll" hover>
            <table>
              <tr v-for="item in orderArr" :key="item.id">
                <td><img :src="item.src" alt="" /></td>
                <td>{{ item.time }}</td>
                <td>{{ item.num }}件</td>
                <td>{{ item.num }}元</td>
                <td>{{ item.cat }}</td>
                <td>{{ item.name }}</td>
              </tr>
            </table>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts";
import { getChart, getPie } from "@/utils/chart.js";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import  getImageUrl  from "../../utils/images";


const router = useRouter();

//控制单选效果
const radio1 = ref("1");

//获取dom节点
const divContent = ref(null);

const pieContent = ref(null);

const arrData = ref([50, 150, 60, 120, 200, 20, 80]);

const orderArr = ref([
  {
    id: 1,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1230%252F2def53f3j00r4xa9z001lc000hs00hsc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990466&t=3d0f48ce10514b9a12d6af2aafb34fec",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 2,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14376173976%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990569&t=d16020a9dcac92942d981e21cbb1d4bb",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 3,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14482056995%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990586&t=65180e4405cba67f0afaa456c5f49300",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 4,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14376173976%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990569&t=d16020a9dcac92942d981e21cbb1d4bb",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 5,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14482056995%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990586&t=65180e4405cba67f0afaa456c5f49300",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 6,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1230%252F2def53f3j00r4xa9z001lc000hs00hsc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990466&t=3d0f48ce10514b9a12d6af2aafb34fec",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 7,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14376173976%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990569&t=d16020a9dcac92942d981e21cbb1d4bb",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
  {
    id: 8,
    src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14376173976%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672990569&t=d16020a9dcac92942d981e21cbb1d4bb",
    time: "2015",
    num: 3,
    count: 20,
    cat: "男装",
    name: "羽绒服",
  },
]);

//完成挂载后执行
onMounted(() => {
  var myChart = echarts.init(divContent.value);
  var myChart2 = echarts.init(pieContent.value);
  getChart(myChart, arrData.value);
  getPie(myChart2);
});

/**
 * changeRadio
 * 单选框自定义事件change 绑定值变化时触发的事件 默认接收一个参数 为单选框的label所绑定值
 * 当切换对应单选时显示不同数据
 * @param {string} select
 */
function changeRadio(select) {
  if (select === "1") {
    arrData.value = [50, 150, 60, 120, 200, 20, 80];
    var myChart = echarts.init(divContent.value);
    getChart(myChart, arrData.value);
  } else if (select === "2") {
    arrData.value = [20, 120, 60, 200, 60, 30, 50];
    var myChart = echarts.init(divContent.value);
    getChart(myChart, arrData.value, "orange");
  }
}

//跳转页面函数
function jumpDetail(id) {
  router.push({
    path: "/index/details",
    query: {
      id,
    },
  });
}

</script>

<style lang="less" scoped>
.center {
  display: flex;
  .left {
    height: 718px;
    width: 500px;

    .top {
      display: flex;
      cursor: pointer;
      .people {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 145px;
        width: 220px;
        margin-right: 20px;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
        &:hover {
          box-shadow: 0px 10px 20px rgba(7, 4, 52, 0.4);
        }
        .info {
          :nth-child(1) {
            font-size: 20px;
          }
          :nth-child(2) {
            font-size: 12px;
          }
        }
      }
      .money {
        display: flex;
        align-items: center;
        height: 145px;
        width: 220px;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
        justify-content: space-evenly;
        &:hover {
          box-shadow: 0px 10px 20px rgba(7, 4, 52, 0.4);
        }

        .info {
          :nth-child(1) {
            font-size: 20px;
          }
          :nth-child(2) {
            font-size: 12px;
          }
        }
      }
    }
    .bot {
      height: 542px;
      width: 460px;
      box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
      margin-top: 31px;
      h4 {
        float: left;
        font-size: 12px;
        padding-left: 10px;
        border-left: 2px solid rgb(255, 195, 6);
        margin-left: 20px;
        margin-top: 30px;
      }
      .data {
        height: 120px;
        // width: 460px;
        box-sizing: border-box;
        clear: both;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 60px;
        p {
          box-sizing: border-box;
          display: flex;
          padding: 40px 10px 0 10px;
          margin: 0 0 10px 0;
          justify-content: space-between;
        }
        .count {
          padding: 10px 10px 0 10px;
          display: flex;
          span {
            font-size: 20px;
            line-height: 50px;
            box-sizing: border-box;
          }
          :first-child {
            border-radius: 5px 0 0 5px;
            width: 236px;
            height: 50px;
            background: rgb(46, 70, 185);
            padding-left: 10px;
          }
          :last-child {
            border-radius: 0 5px 5px 0;
            width: 162px;
            background: rgb(255, 191, 53);
            height: 50px;
            text-align: right;
            padding-right: 10px;
          }
        }
      }

      .list {
        margin: 0 auto;
        width: 400px;
        height: 400px;
        .day {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .contentOne {
          width: 400px;
          height: 300px;
        }
      }
    }
  }
  .right {
    height: 718px;
    flex-grow: 1;
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
    .report {
      height: 200px;
      box-sizing: border-box;
      padding-top: 30px;
      h4 {
        font-size: 12px;
        padding-left: 10px;
        border-left: 2px solid rgb(255, 195, 6);
        margin-left: 20px;
      }
      .pic {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .leftPic {
          div {
            display: flex;
            align-items: center;
            p {
              display: flex;
              flex-direction: column;
              :first-child {
                font-size: 24px;
              }
            }
          }
        }

        .rightPic {
          width: 200px;
          height: 200px;
          margin-right: 40px;
        }
      }
    }

    .orderList {
      margin-top: 30px;
      margin-left: 30px;
      width: 800px;
      .head {
        ul {
          display: flex;
          li {
            padding-left: 10px;
            padding-bottom: 10px;
            border-bottom: 4px solid rgb(33, 61, 192);
            box-sizing: border-box;
          }
        }
      }

      .content {
        height: 430px;
        width: 760px;
        overflow: hidden;
        margin-top: 20px;
        table {
          height: 100%;
          tr {
            td {
              width: 100px;
              height: 60px;
              img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
